﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我的订单</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link th:href="@{/assets/plugins/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/plugins/datatables/buttons.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>

    <link th:href="@{/assets/plugins/datatables/responsive.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">
</head>
<body>
<div class="app header-default side-nav-dark">
    <div class="layout">
        <div class="header navbar">
            <div class="header-container">
                <ul class="nav-left">
                    <li>
                        <a href="javascript:history.back(-1);">
                            <i class="lni-chevron-left" style="border: transparent;"></i>
                        </a>
                    </li>
                </ul>

                <ul class="nav-right" style="margin-right: 20px;">
                    <li class="user-profile dropdown dropdown-animated scale-left">
                        <a th:href="@{/front/user/userPath(referId=${referId})}">
                            我的
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-container" style="padding: 64px 0 0 0!important;background-color: #f1f2f7;">
            <div class="main-content" style="padding-top: 15px!important;">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">

                            <div class="card" style="border-radius: 10px;width: 100%;margin-bottom: 10px">
                                <div class="card-header border-bottom">
                                    <h4 class="card-title">我的订单列表</h4>
                                    <div style="color: red" id="tips"></div>
                                    <div type="text" style="display: none" id="userId"
                                                th:text="${session.userEntity.id}"></div>
                            </div>
                            </div>
                            <div class="card" style="border-radius: 10px;width: 100%;margin-bottom: 10px">
                                <div class="table-responsive">
                                    <table id="datatable" class="table table-bordered" style="width: 100%">
                                        <thead>
                                        <tr>
                                            <th>商品名称</th>
                                            <th>付款金额</th>
                                            <th>购买数量</th>
                                            <th>发货状态</th>
<!--                                            <th>购买时间</th>-->
                                            <th>操作</th>
                                        </tr>
                                        </thead>
<!--                                        <tbody>-->
<!--                                        <tr th:each="order:${orders}" >-->
<!--                                            <td th:text="${order.productEntityName}"></td>-->
<!--                                            <td th:text="${order.payMoney}"></td>-->
<!--                                            <td th:text="${order.totalNum}"></td>-->
<!--                                            &lt;!&ndash;<td th:switch="${order.payStatus}" class="text-center">-->
<!--                                                <span th:case="'0'">已支付</span>-->
<!--                                                <span th:case="'1'">未支付</span>-->
<!--                                            </td>&ndash;&gt;-->
<!--                                            <td th:switch="${order.consignStatus}" class="text-center">-->
<!--                                                <span th:case="'0'">已收货</span>-->
<!--                                                <span th:case="'1'">已发货</span>-->
<!--                                                <span th:case="'2'">未发货</span>-->
<!--                                            </td>-->
<!--                                            <td th:text="${order.createTime}"></td>-->
<!--                                            <td>-->
<!--                                                <a th:href="@{/front/orderPhone/findById(id=${order.id})}">详情</a>-->
<!--                                            </td>-->
<!--                                        </tr>-->
<!--                                        </tbody>-->
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>

    <div id="preloader">
        <div class="loader" id="loader-1"></div>
    </div>


    <script th:src="@{/assets/js/jquery-min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/jquery.app.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>

    <script th:src="@{/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/dataTables.bootstrap4.min.js}"></script>

    <script th:src="@{/assets/plugins/datatables/dataTables.buttons.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/buttons.bootstrap4.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/jszip.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/pdfmake.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/vfs_fonts.js}"></script>
    <script th:src="@{/assets/plugins/datatables/buttons.html5.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/buttons.print.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/buttons.colVis.min.js}"></script>

    <script th:src="@{/assets/plugins/datatables/dataTables.responsive.min.js}"></script>
    <script th:src="@{/assets/plugins/datatables/responsive.bootstrap4.min.js}"></script>

    <script th:src="@{/assets/js/datatables.init.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
</div>
</body>

<script type="text/javascript" th:inline="none">
    $("#datatable").DataTable({
    "oLanguage": {
        "sUrl": "/assets/page_zh_CN.json"
    },
        // ordering:true,
        // "order": [[ 0, "desc" ]],
        bSort:false,
    serverSide: true, //开启后端模式
    searching: false,  //禁用原生搜索
    bLengthChange:false,
    "pageLength": 10,         //初始化显示几条数据
    "sAjaxSource": "/front/orderPhone/pageTablePhone",
    "fnServerData": function (sSource, aoData, fnCallback) {
        $.ajax({
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": {
                aoData: JSON.stringify(aoData)
            },
            "success": fnCallback
        });
    },
    "bDeferRender": true,// 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。默认值：False
    //列表表头字段
    "aoColumns": [
        {"mData": "productName","width":"15%", "orderable": false},
        {"mData": "payMoney","width":"15%", "orderable": false},
        {"mData": "totalNum","width":"15%", "orderable": false},
        {"mData": "consignStatus","width":"15%", "orderable": false},
        // {"mData": "createTime","width":"15%", "orderable": false},
        {"mData": "id","width":"15%", "orderable": false}
    ],

    "fnRowCallback" : function(nRow, aData, iDisplayIndex) {//相当于对字段格式化
        if (aData["consignStatus"] == 0) {
            $('td:eq(3)', nRow).html("<span>已收货</span>");
        } else if (aData["consignStatus"] == 1) {
            $('td:eq(3)', nRow).html("<span>已发货</span>");
        } else if (aData["consignStatus"] == 2) {
            $('td:eq(3)', nRow).html("<span>未发货</span>");
        }

        var html = "";
            html+='<a href="/front/orderPhone/findById?id='+aData["id"]+'">详情</a>';
        $('td:eq(4)', nRow).html(html);
    }

});

    function orderConfirmReceipt(orderId) {
        var userId = $("#userId").text();
        console.log(orderId);
        console.log(userId);
        $.post("orderConfirmReceipt",
            {"id": orderId},
            function (data) {
                if (data != "0") {
                    window.open("/front/orderPhone/getAllByUserId?userId=" + userId, "_self");
                } else {
                    $("#tips").text("确认收货失败");
                    $("#tips").show();
                }
            }
        )
    }

    function orderCancel(orderId) {
        var userId = $("#userId").text();
        console.log(orderId);
        console.log(userId);
        $.post("orderCancel",
            {"id": orderId},
            function (data) {
                if (data != "0") {
                    window.open("/front/orderPhone/getAllByUserId?userId=" + userId, "_self");
                } else {
                    $("#tips").text("取消订单失败");
                    $("#tips").show();
                }
            }
        )
    }
</script>

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
</html>


